<template>
  <div class="cart">
    <van-nav-bar
      title="购物车"
      :left-text="isEit ? '编辑' : '完成'"
      @click-left="onClickLeft"
    />
    <div class="scroll">
      <img
        v-if="!token || cartList.length == 0"
        src="../../assets/img/dp.png"
        alt=""
      />
      <van-swipe-cell v-for="(item, index) in cartList" :key="index">
        <van-checkbox
          v-model="item.ischeck"
          checked-color="#ee0a24"
          @change="checkBtn"
        ></van-checkbox>
        <van-card class="goods-card" :thumb="item.imgUrl">
          <template #tags>
            <h6>{{ item.name }}</h6>
            <p>{{ item.tiesName.join("") }}</p>
            <section>
              <span style="color: red">￥{{ item.price }}</span>
              <van-stepper v-model="item.num" />
            </section>
          </template>
        </van-card>
        <template #right>
          <van-button square text="删除" @click="del(index)" type="danger" class="delete-button" />
        </template>
      </van-swipe-cell>
      <h5>猜你喜欢</h5>
      <section class="scr-ct">
        <people-cart
          v-for="(item, index) in showList"
          :key="index"
          :itemObj="item"
          :sell="true"
        ></people-cart>
      </section>
      <van-submit-bar :price="allPrice" :button-text="isEit?'提交订单':'删除'" @submit="onSubmit">
    <van-checkbox v-model="checkAll" checked-color="#ee0a24" @click="checkAllBtn">全选</van-checkbox>
  </van-submit-bar>
    </div>
  </div>
  
</template>

<script>
import { ref, reactive, toRefs, computed } from "vue";
import { getGoods, checkToken} from "../../api/home/home";
import peopleCart from "../../components/peopleCart.vue";
import { useStore } from "vuex";
export default {
  components: { peopleCart },
  setup() {
    checkToken({token:localStorage.getItem("token")}) // 检验是否登录过期
    const isEit = ref(true);
    const store = useStore();
    const data = reactive({
      showList: [], // 猜你喜欢展示的数据
      token: localStorage.getItem("token"),
      cartList: computed(() => store.state.carList),
      checkAll: store.state.carList.every(item => item.ischeck), // 全选的变量
      allPrice: computed(() => {
        let price = 0;
        data.cartList.forEach(item => {
          if(item.ischeck){
            price+=item.price*item.num
          }
        })
        return price*100 // 因为 vant 组件里面的钱的单位是分
      })
    });

    getGoods().then((res) => {
      // 取 0-10的随机数
      //  console.log(ma);
      // Math.random(); 0-1 随机数
      // Math.random()*10; 0-10的随机数
      // splice 第一个参数变成随机数就行
      // data.showList 总的条数才28
      let num = res.data.length - 4; // 得到的结果就是随机数的最大取值范围
      let ren = parseInt(Math.random() * num); // 获取0-24的随机整数
      data.showList = res.data.splice(ren, 4);
    });
    const onClickLeft = () => {
      // 编辑和完成按钮的切换事件
      isEit.value = !isEit.value;
    };
    const onSubmit = () => { // 提交订单
       if(isEit.value == false){
         store.commit('deleteAll');
       } else {
         console.log('订单可以提交');
       }
    }
    const checkAllBtn = () => { // 全选的事件
        // console.log(data.checkAll);
        store.commit('storeCheck',data.checkAll);
    }
    const checkBtn = () => { // 反选的事件
       data.checkAll = data.cartList.every(item => item.ischeck);
    }
    const del = (i) => { // 删除事件
       store.commit('storeDel',i);
    }
    return {
      onClickLeft,
      isEit,
      ...toRefs(data),
      onSubmit,
      checkAllBtn,
      checkBtn,
      del
    };
  },
};
</script>
<style lang="scss" scoped>
// scoped 会随机生成一串id避免样式的污染

// 在vue2 里面 /deep/ 在vue3 :deep()
:deep(.van-nav-bar__text) {
  color: red;
}
// p{
//   color: red;
// }
.scroll {
  height: calc(100% - 96px);
  overflow: auto;
  background: #fff;
  img {
    width: 100%;
  }
  h5 {
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 15px;
  }
  .scr-ct {
    display: flex;
    flex-wrap: wrap;
    padding: 0 10px;
    justify-content: space-between;
  }
}
:deep(.van-swipe-cell__wrapper) {
  display: flex;
  padding: 0 10px;
  .goods-card {
    flex: 1;
    background: #fff;
    p {
      color: #b2b2b2;
      margin: 16px 0;
    }
    section {
      width: 100%;
      display: inline-flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  .van-button {
    height: 100%;
  }
}
.van-submit-bar{
  bottom: 50px;
}
</style>